<template>
  <div class="reply_class">
    <h1 align="center" style="color: rgb(110, 150, 160);">错题合集</h1><br>
    <div class="div_el_card">
      <el-card class="el_card" shadow="hover">
        <div style="width: 77%;margin-left: 4%">
          <span style="font-size: 24px;font-weight: 600">题目{{status+1}}/{{replyId.length}}:</span>
          <span style="font-size: 18px;height: 80px;color: #17B3A3;display: block;margin-left: 10%">{{home.titleName}}</span>
        </div>
        <div style="width: 100%;margin-left: 4%;margin-top: 30px">
          <span style="font-size: 16px;font-weight: 500;">答辩类型：</span><span style="font-size: 14px;color: #17B3A3">{{home.subjectType.typeName}}</span><br><br>
          <span style="font-size: 16px;font-weight: 500;">答辩难度：</span><span style="font-size: 14px;color: #17B3A3">{{home.subjectDifficlty.difficultyName}}</span>
        </div>
        <div style="width: 100%;margin-left: 4%;margin-top: 20px">
          <span style="font-size: 16px;font-weight: 500;">题目描述：</span><span style="font-size: 14px;color: #17B3A3">{{home.subiectDesc}}</span>
        </div>
        <div style="width: 100%;margin-left: 4%;margin-top: 20px">
          <span style="font-size: 16px;font-weight: 500;">答题时间：</span><span style="font-size: 14px;color: #17B3A3">{{editTime(replyId[status].beginDate)}}</span>
          <span style="font-size: 16px;font-weight: 500;margin-left: 30px">结束时间：</span><span style="font-size: 14px;color: #17B3A3">{{editTime(replyId[status].endDate)}}</span>
        </div>

        <!--        用户答题区-->
        <div style="width: 100%;margin-left: 4%;margin-top: 20px">
          <span style="font-size: 16px;font-weight: 500">✅&nbsp;&nbsp;答案：</span><span style="font-size: 16px;color: #17B3A3;display: block;height: 20px;margin-left: 7%;width: 84%">{{home.standardAnswer}}</span><br><br>
          <span style="font-size: 16px;font-weight: 500">{{dataForm.score ===100?'✔️':'❌'}}&nbsp;&nbsp;我的：</span><span style="font-size: 16px;color: #17B3A3;display: block;height: 20px;margin-left: 7%;width: 84%">{{form[status].standardAnswer}}</span><br><br>
        </div>

        <!--        总分-->
<!--        <div class="time_class">-->
<!--          <span style="font-size: 16px;font-weight: 500">💡️ 总分：</span>-->
<!--          <span style="color: red;">{{replyId[status].replyScore}} </span>分<br>-->
<!--          <span><svg t="1627382132140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="796" style="width: 165px;height: 30px"><path d="M281.6 435.2c38.4-8.533333 247.466667-59.733333 520.533333-76.8 46.933333-4.266667 55.466667-29.866667 29.866667-38.4-21.333333-8.533333-192-29.866667-563.2 55.466667-42.666667 8.533333-64 21.333333-81.066667 42.666666-8.533333 8.533333-8.533333 25.6 0 34.133334 12.8 17.066667 64-12.8 93.866667-17.066667z m550.4 38.4c-64 4.266667-392.533333 17.066667-721.066667 136.533333-59.733333 21.333333-93.866667 42.666667-93.866666 76.8 0 12.8 4.266667 4.266667 17.066666 21.333334 42.666667 42.666667 170.666667-145.066667 887.466667-196.266667 0 0 76.8 0 76.8-21.333333 4.266667-25.6-93.866667-21.333333-166.4-17.066667z" p-id="797"></path></svg></span>-->
<!--        </div>-->

<!--        <div class="class_1627382608497">-->
<!--          <span>-->
<!--            <svg t="1627382608497" class="icon" viewBox="0 0 2779 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" style="width: 200px;height: 200px"><path d="M457.874286 72.155429c-90.550857 28.16-292.790857 28.745143-372.553143-8.301715C157.732571 12.178286 261.485714 63.780571 328.265143 31.268571c54.089143 2.633143 112.64 0.877714 129.609143 40.886858z m24.246857-40.813715c98.779429 22.454857 174.592-16.164571 234.934857 57.270857l-234.898286-0.073142-0.036571-57.197715z m728.868571 0.329143c17.481143 28.745143 92.745143-0.841143 97.243429 40.886857 25.014857-1.974857 19.382857-34.816 40.484571-40.813714 402.285714 1.828571 930.048-0.768 1384.886857 0.621714 35.913143 70.838857-32.182857 206.226286 16.310858 318.646857-0.658286 26.477714-27.794286 26.331429-40.448 40.777143l0.256 604.598857c-223.634286-10.825143-495.542857 21.211429-704.585143-16.676571 38.217143-35.584 70.656-19.894857 113.371428 0.073143 32.182857-0.256 32.804571-32.292571 56.685715-40.813714 133.558857 6.107429 385.024 0.841143 518.326857 0.256-3.766857-300.653714 0.548571-531.236571-0.365715-849.664-507.574857-5.705143-1036.653714 10.386286-1530.697142-8.886858-16.676571-49.517714 43.849143-21.101714 48.566857-49.005714zM1065.289143 72.411429c24.649143 7.862857 82.139429-17.444571 81.005714 16.384-24.649143-7.862857-82.139429 17.444571-81.005714-16.384zM28.635429 129.097143l24.283428 0.036571c4.169143 306.834286 2.816 527.835429 16.603429 808.813715 308.882286 17.627429 654.445714-22.016 939.446857 16.786285 153.453714-7.168 351.232-27.501714 510.171428 0.219429 29.147429-20.699429 159.049143-39.570286 153.965715 24.576-10.569143 42.24-60.598857 0.438857-81.005715-0.036572-494.153143 37.741714-1058.157714 5.083429-1579.264 15.616 5.229714-297.837714-13.019429-637.220571 15.798858-866.011428zM1737.874286 938.788571c23.954286 23.844571 105.691429 23.881143 129.609143 0.036572-3.803429 17.408 11.52 15.579429 24.283428 16.384v40.813714c-68.242286-29.988571-116.772571-2.194286-194.340571-0.073143l-0.036572-40.850285c15.286857-3.620571 48.822857 11.154286 40.484572-16.310858z m210.614857 16.420572c30.646857-3.693714 29.147429 25.014857 40.448 40.886857l-56.685714-0.036571c-6.034286-25.234286 27.940571-9.947429 16.237714-40.850286z" fill="#12CF5B" p-id="3146"></path></svg>-->
<!--          </span>-->
<!--        </div>-->

        <!--        视频-->
        <div class="video_class">
          <!--      autoplay 浏览器加载完后视频文件后立即播放
                    muted状态，这样做的目的是当视频自动播放时会静音
                    loop属性让视频播放结束时，再从头开始循环播放
          -->
          <video ref="video" controls controlslist="nodownload" autoplay
                 preload="none" width="100%" height="100%" :poster="dataForm.urlData" :src="dataForm.urlData">
          </video>
        </div>

        <!--        下一题-->
        <div style="width: 100%;margin-left: 4%;margin-top: 15px">
          <el-button v-if="status!==0" @click="previousQuestion" style="background: #17B3A3;color: #ffffff;width: 45%">上一题</el-button>
          <el-button v-if="status!==replyId.length-1" @click="nextQuestion" :class="status===0?'buttonWidthOne':'buttonWidthTwo'">下一题</el-button>
          <el-button v-if="status===replyId.length-1" @click="closure" type="success" :class="replyId.length-1===0?'nextOne':'nextTwo'">关闭</el-button>
        </div>

<!--        <div class="score_div">-->
<!--          <span>{{replyId[status].score ===100?'👏':'🤔'}}</span>-->
<!--        </div>-->

        <div class="data_class">
          <center>
            <span><svg t="1627807739190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4458" style="width: 229px;height: 40px"><path d="M699.245714 146.285714h34.011429a85.942857 85.942857 0 0 1 85.577143 85.942857v559.542858A85.942857 85.942857 0 0 1 733.257143 877.714286H266.24a85.942857 85.942857 0 0 1-85.577143-85.942857V232.228571A85.942857 85.942857 0 0 1 266.24 146.285714h433.005714" fill="#EFFBF8" p-id="4459"></path><path d="M733.257143 896H266.24a104.228571 104.228571 0 0 1-103.862857-104.228571V232.228571A104.228571 104.228571 0 0 1 266.24 128h467.017143a104.228571 104.228571 0 0 1 103.862857 104.228571v559.542858a104.228571 104.228571 0 0 1-103.862857 104.228571zM266.24 164.571429a67.657143 67.657143 0 0 0-67.291429 67.657142v559.542858a67.657143 67.657143 0 0 0 67.291429 67.657142h467.017143a67.657143 67.657143 0 0 0 67.291428-67.657142V232.228571a67.657143 67.657143 0 0 0-67.291428-67.657142z" fill="#1E7F69" p-id="4460"></path><path d="M626.834286 726.308571H363.154286a64.365714 64.365714 0 0 1-50.102857-23.405714 66.56 66.56 0 0 1-14.994286-42.057143v-146.285714a34.377143 34.377143 0 0 1-31.817143-7.68 33.28 33.28 0 0 1-10.24-22.674286 31.817143 31.817143 0 0 1 10.24-24.137143l189.805714-171.52a73.142857 73.142857 0 0 1 15.725715-10.971428 69.12 69.12 0 0 1 27.428571-6.217143 68.388571 68.388571 0 0 1 27.062857 5.851429 80.822857 80.822857 0 0 1 20.114286 13.897142l186.88 168.96a31.817143 31.817143 0 0 1 10.24 22.308572 36.571429 36.571429 0 0 1-9.142857 25.234286 32.548571 32.548571 0 0 1-32.914286 8.777142v144.091429a64.731429 64.731429 0 0 1-12.068571 38.4 66.194286 66.194286 0 0 1-52.662858 27.428571z m-4.754286-36.571428h14.262857a29.988571 29.988571 0 0 0 23.771429-12.434286 30.354286 30.354286 0 0 0 4.754285-16.822857v-212.845714l-142.628571-129.097143a44.982857 44.982857 0 0 0-10.24-8.045714 21.942857 21.942857 0 0 0-12.068571-2.56 27.794286 27.794286 0 0 0-12.434286 2.925714 42.057143 42.057143 0 0 0-6.948572 5.12l-146.285714 131.657143v213.211428a30.72 30.72 0 0 0 6.948572 19.382857 28.525714 28.525714 0 0 0 21.577142 9.508572z" fill="#1E7F69" p-id="4461"></path><path d="M446.537143 613.668571v-60.342857a19.382857 19.382857 0 1 1 38.765714 0v60.342857a19.382857 19.382857 0 1 1-38.765714 0z m0 0M592.822857 613.668571v-40.96a19.017143 19.017143 0 0 1 19.382857-19.382857 19.382857 19.382857 0 0 1 19.382857 19.382857v40.96a19.382857 19.382857 0 0 1-19.382857 19.382858 19.382857 19.382857 0 0 1-19.382857-19.382858z m0 0M373.028571 613.668571v-24.868571a19.382857 19.382857 0 0 1 38.765715 0v24.868571a19.382857 19.382857 0 0 1-38.765715 0z m0 0M520.045714 613.668571v-95.451428a19.382857 19.382857 0 0 1 19.382857-19.382857 19.382857 19.382857 0 0 1 19.382858 19.382857v95.451428a19.382857 19.382857 0 0 1-19.382858 19.382858 19.382857 19.382857 0 0 1-19.382857-19.382858z m0 0" fill="#333333" p-id="4462"></path></svg></span><br>
            <span>
              <el-button :key="index" @click="chooseData(index)" plain type="primary" class="button_class" v-for="(item,index) in replyId">{{index+1}}</el-button>
            </span>
          </center>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Utils from "../../../assets/js/util";
export default {
  data() {
    return {
      home: {},
      keyWord: '',
      tableTable: [],
      dataForm: {},
      form: [],
      timeOne: undefined,
      disabled: false,
      timeDisabledOne: false,
      timeDisabledTwo: true,
      id: 1,
      status: 0,
      beginTime: null,
      showTime: null,
      replyId: null,
      subjectOptions: [],
      subjectData:{}
    }
  },
  methods: {
    //选择题目
    chooseData(val){
      this.status = val
      this.findData()
    },
    closure(){
      // 调用全局挂载的方法
      this.$store.dispatch('reply/showwrong', this.$route)
      Utils.$emit('demo','msg');
      this.$router.push({path:'reply-replyrecord'})
    },
    editTime(val){//日期处理
      const date = val
      if (date === undefined) {
        return ''
      }
      return moment(date).format('yyyy-MM-DD HH:mm:ss')
    },
    previousQuestion(){
      this.status = this.status - 1
      this.findData();
    },
    nextQuestion(){//下一题
      this.status = this.status + 1
      this.findData();
    },
    async findData(){//获取当前答辩室的题目
      //按照题目id查询题目信息
      await this.$http({
        url: this.$http.adornUrl(`/reply/subject/info/${this.replyId[this.status].subjectId}`),
        method: 'get'
      }).then(({data}) => {
        this.keyWord = ''
        //当前题目
        this.home = data.subject
        for (let i=0;i<data.keyWordEntityList.length;i++){
          let keyTable = data.keyWordEntityList[i]
          keyTable.keyWordName = JSON.parse(keyTable.keyWordName)
          for (let j=0;j<keyTable.keyWordName.length;j++){
            this.keyWord += keyTable.keyWordName[j].keyWordName + "、"
          }
        }
        //当前题目分词
        this.keyWord = this.keyWord.substring(0,this.keyWord.length-1)
        this.dataForm = {}
        this.editDataForm()
      })
    },
    editDataForm(){
      this.dataForm = this.replyId[this.status]
      this.form[this.status].id = this.dataForm.subjectId
      this.form[this.status].standardAnswer = this.dataForm.resultAnswer
      this.home.subjectType = JSON.parse(this.home.subjectType)
      this.home.subjectDifficlty = JSON.parse(this.home.subjectDifficlty)
    }
  },
  async mounted() {
    if(this.$route.query.data===undefined){
      this.$message({
        message: '请先选择错题！',
        type: 'error',
        duration: 1500,
        onClose: () => {
          // 调用全局挂载的方法
          this.$store.dispatch('reply/showwrong', this.$route)
          Utils.$emit('demo','msg');
          this.$router.push({path:'reply-replyrecord'})
        }
      })
    }else{
      this.replyId = JSON.parse(this.$route.query.data)
      this.form = []
      for (let i=0;i<this.replyId.length;i++){
        this.form.push({id: '',standardAnswer: ''})
      }
      await this.findData();
    }
  }
}
</script>

<style>
.video_class{
  position: fixed;
  width: 14%;
  top: 43%;
  right: 20%;
}

.data_class {
  position: fixed;
  width: 16%;
  top: 25%;
  right: 5%;
}

.button_class {
  width: 53px;
  padding: 10px 20px;
  margin: 3px 5px 3px 0px;
  font-size: 14px;
  border-radius: 4px;
}

.nextOne {
  background: #85ce61;color: #ffffff;width: 90%
}

.nextTwo {
  background: #85ce61;color: #ffffff;width: 45%
}

.buttonWidthOne {
  background: #17B3A3;color: #ffffff;width: 90%
}

.buttonWidthTwo {
  background: #17B3A3;color: #ffffff;width: 45%
}

.el-button+.el-button {
  margin-left: 0px;
}
.data_show{
  position: fixed;
  width: 4%;
  top: 28%;
  right: 5%;
}

.time_class{
  position: fixed;
  width: 10%;
  top: 28%;
  right: 8%;
}

.class_1627382608497 {
  position: fixed;
  width: 12%;
  top: 17%;
  right: 8%;
}

.score_div{
  position: fixed;
  width: 65%;
  top: 27%;
  right: 15%;
  font-size: 25px;
}

.el_card{
  float: right;
  margin-right: 5%;
  width: 80%;
  height: 80%;
}

.div_el_card{
  width: 100%;
  height: 100%;
  left: 30px;
}

.reply_class{
  position:fixed;
  top: 98px;
  right: 3px;
  width:95%;
  height:86%;
  background:url("../../../assets/img/reply.png");
  opacity: 80%;
  background-size:100% 100%
}
</style>
